<template>
  	<div style="height: 100%;">
  		<div class="content">
  			<div class="jl">
  				距离拼抢结束
  			</div>
  		</div>
  		<div class="shijian1">
  			<center>
	  			<input type="button" :value="day" class="shijian_yq"/>天
	  			<input type="button" :value="hours" class="shijian_yq"/>:
	  			<input type="button" :value="minutes" class="shijian_yq"/>:
	  			<input type="button" :value="miao" class="shijian_yq"/>
  			</center>
  		</div>
  		
  		<div class="yqhy_1">
  			邀请好友助力，点击右上角发送给好友
  		</div>
  		<div @click="enjoytrue" class="yaoqing">
  			<input type="button" value="邀请好友助力"/>
  		</div>
  		<div v-show="fenxiang" style="position: absolute;height: 100%;width: 100%;background: rgba(0,0,0,0.8);top: 0px;left: 0px;">
	  		<div  @click="enjoying" style="height: 25px;width: 100%;padding: 0 31px;position: absolute;top: 50%;margin-top: -110px;">
	  			<span style="line-height: 25px;font-size: 18px;text-align: center;color: #FFFFFF;">邀请好友助力，点击右上角发送给朋友</span>
	  		</div>
	  		<div style="height:100px;width:50px;position: absolute;top:50px;right: 20px;">
  				<img src="static/zhishi.png" style="display: block;width:100%;height: 100%;">
  			</div>
  		</div>
  		<div v-show="enjoy" @click="disenjog" style="position: absolute;height:100%;width: 100%;background: rgba(0,0,0,0.5);top: 0px;left: 0px;">	
  		</div>
  		<div v-show="enjoy" style="z-index: 10; width: 250px;height: 215px;background: #FFFFFF;position: absolute;top:50%;left:50%;margin-left: -125px;margin-top: -108px;border-radius: 5px;">
			
			<div class="fe_cheng">
				<div class="tu_pian"><img src="static/successful_small.png"></div>
				<div class="fen_chenggong">分享成功</div>
			</div>
			<div class="fen_xiang">
				<div class="fen_xiangcishu">分享次数越多，拼抢成功率越高</div>
			</div>
			
			<div class="zu_li" @click="zhuli">
				<input type="button" value="助力拼抢(交钱)" class="p_q"/>
			</div>
			
			<router-link to="/">
			<div class="fa_hu">
				<input type="button" value="返回拼抢ing" class="f_h"/>
			</div>
			</router-link>
		</div>
  	</div>
  
</template>

<script>
import axios from 'axios'
export default {
	components: {

	},
	data () {
		return {
			fenxiang:false,
			enjoy:false,
			day:'',
			hours:'',
			minutes:'',
			miao:'',
			order_id:'',
		}
	},
  	methods:{
		enjoytrue(){
			this.fenxiang = true;
		},
		enjoying(){
			this.enjoy = true;
			this.fenxiang = false;
		},
		disenjog(){
			this.enjoy = false;
		},
		dateDif(begin,end){
		    var date = begin - end; 
		    var days    = date / 1000 / 60 / 60 / 24;
		    var daysRound   = Math.floor(days);
		    var hours    = date/ 1000 / 60 / 60 - (24 * daysRound);
		    var hoursRound   = Math.floor(hours);
		    var minutes   = date / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
		    var minutesRound  = Math.floor(minutes);
		    var seconds   = date/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
		    var secondsRound  = Math.floor(seconds);
		    var time = "倒计时"+(daysRound+"天"+hoursRound +"时"+minutesRound+"分"+secondsRound+"秒");
		    this.day = daysRound;
		    this.hours = hoursRound;
		    this.minutes = minutesRound;
		    this.miao = secondsRound;
		    setInterval(()=>{this.dajishi()},1000)
	    },
	    dajishi(){
	    	if(this.day == 0 && this.hours == 0 && this.minutes == 0 && this.miao == 0){
	    		this.day = 0;
	    		this.hours = 0;
	    		this.minutes = 0;
	    		this.miao = 0;
	    	}else{
		    	if(this.miao > 0){
		    		this.miao--;
		    	}else{
		    		this.miao = 59;
		    		if(this.minutes > 0){
		    			this.minutes--;
		    		}else{
		    			this.minutes = 59;
		    			if(this.hours > 0){
		    				this.hours--;
		    			}else{
		    				this.hours = 23;
		    				if(this.day >0){
		    					this.day--;
		    				}
		    			}
		    		}
		    		
		    	}
		    }
	    },
	    zhuli(){
	    	var order_id = this.$route.query.order_id;
	    	this.$router.push({path:'/haoxingdi',query:{order_id:order_id}});
	    },
	    fenxiang_wechaeat(){
            var that = this;
            var url = location.href.split('#')[0];
            console.log(url)
            axios.get(that.url+"/home/home/fenxiang?url=" + url)
            .then(function(res){
            	console.log(res)
                // if(res.data.status == "success"){
                    that.$wechat.config({
                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId:res.data.appId, // 必填，公众号的唯一标识
                        timestamp:res.data.timestamp , // 必填，生成签名的时间戳
                        nonceStr:res.data.nonceStr, // 必填，生成签名的随机串
                        signature:res.data.signature,// 必填，签名，见附录1
                        jsApiList:[
                            'onMenuShareTimeline', //
                            'onMenuShareAppMessage',
                        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                    // 分享到朋友圈 that.$wechat
                    that.$wechat.ready(() =>{
                        that.$wechat.onMenuShareTimeline({
                            title:'友多拼', // 分享标题
                            link:'http://ydp.mylei.cn/wscjf_app/index.html#/haoxingdi?order_id=' + that.order_id,
                            // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl:that.url + "/vueimg/logo.jpg", // 分享图标
                            success: function () { 
                            // 用户确认分享后执行的回调函数
                                // alert('分享成功');
                            },
                            cancel: function () { 
                            // 用户取消分享后执行的回调函数
                                // alert('分享失败');
                            }
                        });
                        // 分享给朋友 that.$wechat
                        that.$wechat.onMenuShareAppMessage({
                            title:'友多拼', // 分享标题
                            desc:'好兄弟，帮帮忙！', // 分享描述
                            link:'http://ydp.mylei.cn/wscjf_app/index.html#/haoxingdi?order_id=' + that.order_id, 
                            // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl:that.url + "/vueimg/logo.jpg", // 分享图标
                            type:'link', // 分享类型,music、video或link，不填默认为link
                            dataUrl:'', // 如果type是music或video，则要提供数据链接，默认为空
                            success: function () { 
                            // 用户确认分享后执行的回调函数
                                // alert('分享成功');
                            },
                            cancel: function () { 
                            // 用户取消分享后执行的回调函数
                                // alert('分享失败');
                            }
                        });
                    })
                // }
            })
            .catch(function(err){
                console.log(err);
            })
        }, 
	},
	created(){
		this.order_id = this.$route.query.order_id;
		var start_time = this.$route.query.start_time;
		var end_time = this.$route.query.end_time;
		this.dateDif(start_time*1000,end_time*1000);
		this.fenxiang_wechaeat();
	},
}
</script>

<style>
html,body{
	width:100%;
	height:100%;
}
.content{
		width: 100%;
		border: 1px /*solid*/ red;
		display: table;
	}
.jl{width: 100%;
		text-align: center;
		line-height: 13px;
		font-size: 13px;
		color: #4a4a4a;
		margin-top: 90px;
		
	}
	.zl{
		width: 100%;
		text-align: center;
		line-height: 22px;
		font-size: 16px;
		color: #333;
	}
.yqhy_1{width: 100%;
		text-align: center;
		line-height: 22px;
		font-size: 16px;
		color: #4a4a4a;
		margin-top: 80px;
		
	}
.shijian1{
		float: left;
		width: 100%;
		border: 1px /*solid*/ green;
		margin-top: 10px;
		
	}
.shijian_yq{
		width: 44px;
		height: 44px;
		background-color: #00c850;
		color: #FFFFFF;
		line-height: 18px;
		padding: 0 14px;
		margin: 0 4px;
		border: 1px solid #00c850;
	}
.yaoqing{
		margin-top: 20px;
		padding: 0 15px;
}
	
.yaoqing input{
		font-size: 16px;
		width: 100%;
		height: 44px;
		background-color: #00c850;
		border: 1px solid #00c850;
		color: #fff;
		margin: 0 auto;
		outline: none;
		border: none;
	}
</style>